<!-- html -->
<template>
  <view class="container">
    <view class="avator">
      <view class="img">
		  <image :src="userInfo.userInfo.avatar" mode=""></image>
	  </view>
      <view>
        <view>{{userInfo.userInfo.username}}</view>
        <view>
			{{userInfo.userInfo.user_intro?userInfo.userInfo.user_intro:'这个人很懒，什么也没有留下'}}
		</view>
      </view>
    </view>
    <view
      class="edit"
      @click="goToRelease('/neighbor/market/mine/profile/index')"
      >编辑简介</view
    >
    <view class="nav-list">
      <template v-for="item in nav_list">
        <view :key="item.id" class="nav-item" @click="goToRelease(item.url)">
          <image :src="item.image" mode=""></image>
          <text>{{ item.title }} {{ item.num?item.num:'' }}</text>
        </view>
      </template>
    </view>
    <view class="line"></view>
    <view class="bottom">
      <template v-for="item in bottom_list">
        <view class="bottom-item" :key="item.id" @click="goToRelease(item.url)">
          <view class="img"><image :src="item.image" mode=""></image></view>
          <view class="info">
            <text>{{ item.title }}</text>
            <image
              src="https://community.chuangxiangdianli.com/images/neighborimg/market/er_my_arrow@2x.png"
              mode=""
            ></image>
          </view>
        </view>
      </template>
    </view>
    <!-- 底部的tabbar -->
    <market-tab-bar :activeIndex="bottom_tab_bar_index" />
  </view>
</template>
<!-- js -->
<script>
// 引入封装的请求
import request from '@/utils/request.js'	
import MarketTabBar from "../../common/MarketTabBar/index.vue";
export default {
  components: {
    MarketTabBar,
  },
  data() {
    return {
      bottom_list: [
        {
          id: 1,
          title: "我的钱包",
          image: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_my_m@2x.png",
          url: "/neighbor/market/mine/wallert/index",
        },
        {
          id: 2,
          title: "我的评论",
          image: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_my_ping@2x.png",
          url: "/neighbor/market/mine/evaluation/index",
        },
      ],
      nav_list: [
        {
          id: 1,
          title: "卖出",
          num: null,
          image: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_my_1@2x.png",
          url: "/neighbor/market/mine/sell/index",
        },
        {
          id: 2,
          title: "买到",
          num: null,
          image: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_my_2@2x.png",
          url: "/neighbor/market/mine/buy/index",
        },
        {
          id: 3,
          title: "发布",
          num: null,
          image: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_my_3@2x.png",
          url: "/neighbor/market/mine/release/index",
        },
        {
          id: 4,
          title: "收藏",
          num: null,
          image: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_my_4@2x.png",
          url: "/neighbor/market/mine/collection/index",
        },
      ],
      bottom_tab_bar_index: "4",
	  // 用户信息
	  userInfo:{},
    };
  },
  computed: {},
  watch: {},
  onLoad() {},
  onShow() {
	 let that = this
	 uni.getStorage({
	 	key:'userInfo',
	 	success:function(res){
	 		// console.log(res)
	 		that.userInfo = res.data
	 	},
	 	fail:function(res){
	 		uni.navigateTo({
	 			url: '/login/bindinguser/index'
	 		})
	 	},
	 })
	 this.get_number()
  },
  // 自定义返回逻辑
  // onBackPress() {
  //   uni.navigateBack({
  //     url: "/pages/neighbor/index",
  //   });
  //   return true; //表示禁止默认返回
  // },
  methods: {
	// 获取卖出买到收藏发布的数量
	get_number(){
		let that = this
		request.get('Mini/circle/flea/getMyDataCount').then(res=>{
			console.log(res)
			if(res.code==200){
				let obj = res.data
				that.nav_list[0].num = obj.sellOut
				that.nav_list[1].num = obj.myBuy
				that.nav_list[2].num = obj.myGoods
				that.nav_list[3].num = obj.myCollection
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		})
	},
	// 改变底部tabbar
	chang_bottom_tab(i) {
	  this.bottom_tab_bar_index = "" + i;
	  // console.log(this.bottom_tab_bar_index)
	},

	// 跳转页面
	goToRelease(value) {
	  uni.navigateTo({
		url: value,
	  });
	},
  },
};
</script>
<!-- css -->
<style lang="scss" scoped>
.container {
  width: 100vw;
  .avator {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 28rpx;
    padding-right: 59rpx;
    .img {
      width: 178rpx;
      height: 178rpx;
      border-radius: 50%;
      margin-right: 61rpx;
	  overflow: hidden;
    }
    & > view:nth-child(2) {
      width: 425rpx;
      view:nth-child(1) {
        font-size: 36rpx;
        font-family: Hiragino Sans GB;
        font-weight: bold;
        color: #333333;
        margin-bottom: 33rpx;
      }
      view:nth-child(2) {
        font-size: 24rpx;
        font-family: Hiragino Sans GB;
        font-weight: bold;
        color: #999999;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  .edit {
    width: 100%;
    box-sizing: border-box;
    padding-right: 35rpx;
    text-align: right;
    font-size: 24rpx;
    font-family: Hiragino Sans GB;
    font-weight: bold;
    color: #f9a73d;
    margin-bottom: 62rpx;
  }
  .nav-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 42rpx;
    .nav-item {
      width: 143rpx;
      height: 143rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      border-radius: 50%;
      image {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 24rpx;
      }
      text {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
  .line {
    width: 100%;
    height: 10rpx;
    background-color: #f3f5f8;
  }
  .bottom {
    width: 100%;
    padding-left: 34rpx;
    margin-top: 39rpx;
    .bottom-item {
      width: 100%;
      display: flex;
      // align-items: center;
      justify-content: space-between;
      margin-bottom: 50rpx;
	  &>view:nth-child(2){
		  height: 100%;
	  }
      .img {
        width: 50rpx;
        height: 50rpx;
        margin-right: 30rpx;
      }
      .info {
        width: 636rpx;
        padding-top: 7rpx;
        padding-bottom: 45rpx;
        border-bottom: 2rpx solid #e9eaeb;
        display: flex;
        justify-content: space-between;
        padding-right: 30rpx;
        text {
          font-size: 28rpx;
          font-family: Hiragino Sans GB;
          font-weight: normal;
          color: #333333;
        }
        image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
}
</style>
